<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject, resource, RESOURCE_TYPE, LOAD_EVENT	} from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { Img, ImgSystem } from '@eva/plugin-renderer-img'
	import { Render, RenderSystem } from '@eva/plugin-renderer-render'
	import { Transition, TransitionSystem } from '@eva/plugin-transition'
	export default{
		name: 'EvajsStudyShowTransition',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.loadResource()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			loadResource(){
				resource.addResource([
					{
						name: 'heart',
						type: RESOURCE_TYPE.IMAGE,
						src: {
							image: {
								type: 'png',
								url: '/images/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png'
							}
						},
						preload: true
					}
				]);
				resource.preload();
				// 开始loader
				resource.on(LOAD_EVENT.START, e => {
					console.log('开始加载', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.PROGRESS, e => {
					console.log('进度监听', e);
				}); 
				// 某文件加载成功
				resource.on(LOAD_EVENT.LOADED, e => {
					console.log('某文件加载成功', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.COMPLETE, e => {
					console.log('完成', e);
					this.showTransition()
				}); 
				// 加载错误
				resource.on(LOAD_EVENT.ERROR, e => {
					console.log('错误', e);
				}); 
			},
			showTransition(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 750,
							height: 1000,
							backgroundColor: 0x101010
						}),
						// 游戏精灵系统
						new ImgSystem(),
						new RenderSystem(),
						new TransitionSystem()
					],
				});
				let tweens = ['linear','ease-in','ease-out','ease-in-out','bounce-in','bounce-out','bounce-in-out'];
				for(let i in tweens){
					this.showTween(this.game,tweens[i],i*50)
				}
				
			},
			showTween(game,type,y){
				const image = new GameObject('image_'+type, {
					size: { width: 40, height: 40 },
					position: {
						x: 0,
						y: y
					}
				})
				image.addComponent(new Img({
					resource: "heart"
				}))
				const animation = image.addComponent(new Transition())
				animation.group = {
					move2: [ 
						{
							name: "position.x", // 对应组件的值
							component: image.transform, // image对应的组件
							values: [
								 {
									time: 0,
									value: 1,
									tween: type
								},
								{
									time: 1000,
									value: 400,
									tween: type // 规定到下一个动作的过度效果  无就不会执行下一个动作
								},
								{
									time: 3000,
									value: 40
								}
							]
						}
					]
				}
				animation.play()
				setTimeout(()=>{
					animation.stop()
				},2000)
				this.game.scene.addChild(image);
			}
		}
	}
</script>